<template>
    <div class="main-container">
        <!-- 头部组件 -->
        <common-header></common-header>
        <!-- 主体内容组件 -->
        <div class="main-box">
            <!-- 左侧组件 -->
            <common-aside></common-aside>
            <!-- 右侧内容主体区域 -->
            <div class="main-body">
                <router-view></router-view>
            </div>
        </div>

    </div>
</template>

<script>
import CommonAside from '../components/common-aside.vue'
import CommonHeader from '../components/common-header.vue'
export default {
    components: { CommonHeader, CommonAside },
    name: "Main"
}
</script>

<style lang="less" scoped>
.main-container {
    height: 100%;
    display: flex;
    flex-direction: column;

    .main-box {
        height: 100%;
        display: flex;

        .main-body {
            flex: 1;
        }
    }
}
</style>